App.require(function () {
    var app = App.getCurrent();

    app.definePage("strpcdatarangePickerActive", {
        getDomObj: function () {
            this.attachDom(".previous-pc-month-container", "previousMonthContainer")
                .attachDom(".previous-select-month-container", "previousSelectContainer")
                .attachDom(".next-pc-month-container", "nextMonthContainer")
                .attachDom(".next-select-month-container", "nextSelectContainer")
                .attachEvent("previousMonthContainer", "click", this.selectPreviousDayHandler, false)
                .attachEvent("nextMonthContainer", "click", this.selectNextDayHandler, false)
                .attachEvent("previousSelectContainer", "animationend", this.animationEndHandler, false)
                .attachEvent("nextSelectContainer", "animationend", this.animationEndHandler, false)
        },
        selectPreviousDayHandler: function (ev) {
            this._selectDay(ev.target, "startYDate", "selectStartDate", "previousMonthContainer");
            var yDate = this.data.endYDate, selectDate = this.data.selectEndDate;
            this.nextCurrentDom.innerHTML = this.computeHtml(yDate.getMonthDays(), yDate, selectDate, null, null, null, true);
            this.parent.staticPage.computeNextPrevNextStyle(selectDate.year, selectDate.month);
        },
        selectNextDayHandler: function (ev) {
            this._selectDay(ev.target, "endYDate", "selectEndDate", "nextMonthContainer");
            var yDate = this.data.startYDate, selectDate = this.data.selectStartDate;
            this.previousCurrentDom.innerHTML = this.computeHtml(yDate.getMonthDays(), yDate, selectDate);
            this.parent.staticPage.computePreviousPrevNextStyle(selectDate.year, selectDate.month);
        },
        _selectDay: function (target, ydatastr, selectStr, domStr) {
            var data = this.data;
            if (target.classList.contains("li-item") && target.nodeName.toUpperCase() === "LI") {
                if (target.classList.contains("str-disabled-date-item")) return;
                data[selectStr].day = parseInt(target.textContent);
                this.attachDate(data[ydatastr], data[selectStr]);
                var selectDay = this.domList[domStr].querySelector(".selected");
                if (selectDay) selectDay.classList.remove("selected");
                target.classList.add("selected");
            }
        },
        attachDate: function (yDate, selectDate) {
            yDate.year = selectDate.year;
            yDate.month = selectDate.month;
            yDate.day = selectDate.day;
        },
        animationEndHandler: function (ev) {
            if (ev.target.classList.contains("previous-select-month-container")) {
                var monthContainer = this.domList.previousMonthContainer;
                monthContainer.className = "previous-pc-month-container";
                var currentDom = this.previousCurrentDom, backDom = this.previousBackDom;
                this.replaceDom(currentDom.classList, true);
                this.replaceDom(backDom.classList);
                this.previousCurrentDom = backDom;
                this.previousBackDom = currentDom;
                this.previousBackDom.innerHTML = "";
            }
            else if (ev.target.classList.contains("next-select-month-container")) {
                var monthContainer = this.domList.nextMonthContainer;
                monthContainer.className = "next-pc-month-container";
                var currentDom = this.nextCurrentDom, backDom = this.nextBackDom;
                this.replaceDom(currentDom.classList, true);
                this.replaceDom(backDom.classList);
                this.nextCurrentDom = backDom;
                this.nextBackDom = currentDom;
                this.nextBackDom.innerHTML = "";
            }
        },
        replaceDom: function (classList, isCurrent) {
            if (isCurrent) {
                classList.remove("current-container");
                classList.add("back-container");
            }
            else {
                classList.remove("back-container");
                classList.add("current-container");
            }
        },
        _operation: function (positionStr, operationStr) {
            var data = this.data, yDate = data.startYDate, selectDate = data.selectStartDate, staticPage = this.parent.staticPage,
                headStr = "startYearMonth", containerStr = "previousMonthContainer", backStr = "previousBackDom", isNext = false;

            if (positionStr !== "start") {
                yDate = data.endYDate;
                selectDate = data.selectEndDate;
                headStr = "endYearMonth";
                containerStr = "nextMonthContainer";
                backStr = "nextBackDom";
                isNext = true;
            }
            var year = yDate.year, month = yDate.month, day = yDate.day, turnClass = "date-turn-left";
            yDate.set(selectDate.year, selectDate.month, selectDate.day);
            if (operationStr == "previous") {
                yDate.previousMonth();
                turnClass = "date-turn-right";
            }
            else yDate.nextMonth();
            staticPage.setHeadStr(headStr, yDate.toYearMonth());
            if (positionStr !== "start") staticPage.computeNextPrevNextStyle(yDate.year, yDate.month);
            else staticPage.computePreviousPrevNextStyle(yDate.year, yDate.month);
            selectDate.day = yDate.day;
            selectDate.month = yDate.month;
            selectDate.year = yDate.year;
            this.domList[containerStr].classList.add(turnClass);
            this[backStr].innerHTML = this.computeHtml(yDate.getMonthDays(), yDate, selectDate, year, month, day, isNext);
            yDate.set(year, month, day);
        },
        startPrevious: function () {
            this._operation("start", "previous");
        },
        startNext: function () {
            this._operation("start", "next");
        },
        endPrevious: function () {
            this._operation("end", "previous");
        },
        endNext: function () {
            this._operation("end", "next");
        },
        computeHtml: function (obj, yDate, data, year, month, day, isNext) {
            var tempHtml = "", now = new Date(),
                year = year || data.year, month = month || data.month, day = day || data.day,
                tYear = now.getFullYear(), tMonth = now.getMonth() + 1, tDay = now.getDate();
            for (var i = 0; i < obj.prevNum; i++) {
                tempHtml += "<li></li>";
            }
            for (var i = 0; i < obj.num; i++) {
                var isDisabledClassStr = this._isInSelectDay(data.year, data.month, i + 1, isNext);
                if (year == yDate.year && month == yDate.month && day - 1== i) {
                    tempHtml += '<li class="li-item ' + isDisabledClassStr + ' selected">' + (i + 1) + '</li>';
                }
                else if (tYear == yDate.year && tMonth == yDate.month && tDay - 1== i) {
                    tempHtml += '<li class="li-item ' + isDisabledClassStr + ' current">' + (i + 1) + '</li>';
                }
                else {
                    tempHtml += '<li class="li-item ' + isDisabledClassStr + '">' + (i + 1) + '</li>';
                }
                
            }
            return tempHtml;
        },
        _isInSelectDay: function (year, month, day, isNext) {
            var minDate = this.data.minDate, maxDate = this.data.maxDate;
            var commonStr = "";
            // if (this.data.startYDate.compare(year, month, day) <= 0 && this.data.endYDate.compare(year, month, day) >= 0) {
            //     commonStr = " li-item-progress";
            // }
            if (isNext && this.data.startYDate.compare(year, month, day) === 1) return "str-disabled-date-item" + commonStr;
            else if (!isNext && this.data.endYDate.compare(year, month, day) === -1) return "str-disabled-date-item" + commonStr; 

            if (!this.data.minDate.year && !this.data.maxDate.year) return commonStr;
            if (!minDate) {
                if (maxDate.compare(year, month, day) > -1) return commonStr;
                return "str-disabled-date-item" + commonStr;
            }
            if (!maxDate) {
                if (minDate.compare(year, month, day) < 1) return commonStr;
                return "str-disabled-date-item" + commonStr;
            }

            if (maxDate.compare(year, month, day) > -1 && minDate.compare(year, month, day) < 1) return commonStr;
            return "str-disabled-date-item" + commonStr;
        },
        init: function () {
            var previousMonthContainer = this.domList.previousMonthContainer, 
                nextMonthContainer = this.domList.nextMonthContainer,
                endYDate = this.data.endYDate,
                startYDate = this.data.startYDate;

            this.previousCurrentDom = previousMonthContainer.querySelector(".current-container");
            this.previousBackDom = previousMonthContainer.querySelector(".back-container");
            this.nextCurrentDom = nextMonthContainer.querySelector(".current-container");
            this.nextBackDom = nextMonthContainer.querySelector(".back-container");
            this.parent.staticPage.computePreviousPrevNextStyle(startYDate.year, startYDate.month);
            this.parent.staticPage.computeNextPrevNextStyle(endYDate.year, endYDate.month);
        },
        render: function (next) {
            var parentData = this.parent.data, data = this.data;
            data.startYDate = parentData.startYDate;
            data.endYDate = parentData.endYDate;
            data.startTime = parentData.startTime;
            data.endTime = parentData.endTime;
            data.minDate = parentData.minDate;
            data.maxDate = parentData.maxDate;
            data.minTime = parentData.minTime;
            data.maxTime = parentData.maxTime;
            data.selectTime = parentData.selectTime;
            data.selectStartDate = parentData.selectStartDate;
            data.selectEndDate = parentData.selectEndDate;
            this.data.startHtml = this.computeHtml(data.startYDate.getMonthDays(), data.startYDate, data.selectStartDate, null, null, null);
            this.data.endHtml = this.computeHtml(data.endYDate.getMonthDays(), data.endYDate, data.selectEndDate, null, null, null, true);
            this.fetch("./index.html", function (html) {
                next(this.renderHTML(html));
            })
        }
    })
})